<template>
  <div class="app-container">
    <el-form class="search_pc_az">
      <el-date-picker
        v-model="dateVal"
        :picker-options="pickerOptions"
        :type="type == 1 ? 'daterange' : 'monthrange'"
        align="center"
        unlink-panels
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="el_date_picker"
        @change="selectDate"/>
      <el-select v-model="type" placeholder="请选择" class="el_select" @change="changeType">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <bar-chart :chart-data="barChartData" />
    </el-row>

    <el-table :data="dateList" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ dateList[scope.$index] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="到访记录数">
        <template slot-scope="scope">
          <span>{{ remarkCountList[scope.$index] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" style="margin-top:0;" @pagination="getCurrentPageData"/>
  </div>
</template>

<script>
import BarChart from './components/BarChart'
import { getRemarkCountData } from '@/api/remark'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getShopId } from '@/utils/auth'
const barChartData = {
  data: {
    dates: [],
    remarkCount: []
  }
}

const tableData = {}

export default {
  name: 'DashboardAdmin',
  components: {
    BarChart,
    Pagination
  },
  data() {
    return {
      type: 1,
      options: [
        { value: 1, label: '按天展示数据' },
        { value: 2, label: '按月展示数据' }
      ],
      dateVal: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime())
            const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date(new Date(new Date().toLocaleDateString()).getTime())
            const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date(new Date().getTime())
            const start = new Date(new Date(new Date().toLocaleDateString()).getTime())
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      barChartData: barChartData.data,
      remarkCountList: [],
      dateList: [],
      total: 0,
      page: 1,
      limit: 20,
      query: {
        shopId: getShopId(),
        start: new Date(new Date(new Date().toLocaleDateString()).getTime() - 136 * 60 * 60 * 1000),
        end: new Date(new Date(new Date().toLocaleDateString()).getTime() + 32 * 60 * 60 * 1000 - 1)
      }
    }
  },
  created() {
    this.getRemarkCountData()
  },
  methods: {
    changeType() {
      this.dateVal = []
      if (this.type === 1) {
        this.query.start = new Date(new Date(new Date().toLocaleDateString()).getTime() - 136 * 60 * 60 * 1000)
        this.query.end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 32 * 60 * 60 * 1000 - 1)
      } else if (this.type === 2) {
        this.query.start = new Date(new Date(new Date().setMonth(new Date().getMonth() - 5)).getTime())
        this.query.end = new Date(new Date())
      }
      this.getRemarkCountData()
    },
    selectDate(data) {
      if (data === null || data.length < 1) {
        this.query.start = ''
        this.query.end = ''
      } else {
        this.query.start = new Date(data[0].getTime() + 8 * 60 * 60 * 1000)
        this.query.end = new Date(data[1].getTime() + 32 * 60 * 60 * 1000 - 1)
      }
      this.getRemarkCountData()
    },
    getRemarkCountData() {
      getRemarkCountData(this.query, this.type).then(response => {
        this.barChartData = JSON.parse(JSON.stringify(response.data.data))
        tableData.remarkCountList = response.data.data.remarkCount.reverse()
        tableData.dateList = response.data.data.dates.reverse()
        this.total = tableData.dateList.length

        this.getCurrentPageData({ page: this.page, limit: this.limit })
      })
    },
    getCurrentPageData(param) {
      const page = param.page
      const size = param.limit
      let end = (page - 1) * size + size + 1
      if ((page - 1) * size + size + 1 > this.total) {
        end = this.total
      }
      this.remarkCountList = tableData.remarkCountList.slice((page - 1) * size, end)
      this.dateList = tableData.dateList.slice((page - 1) * size, end)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  padding: 1px 10px;
  background-color: #f8f8f8;
  .el_row{
    background-color: #ffffff;
    border-radius: 5px;
    padding: 0 10px;
    margin-bottom: 15px;
  }
  .search_pc_az{
    margin: 10px auto;
    max-width: 600px;
    min-width: 225px;
    width: 100%;
    .el_date_picker{
      width: 100%;
      max-width: 400px;
      margin-bottom: 10px;
    }
    .el_select{
      max-width: 180px;
      width: 100%;
    }
  }
}
</style>
